/* eslint-disable no-use-before-define */
import React,{useEffect,useState} from 'react'
import Mytable from '../../components/Mytable'
import { getShopAll } from '../../apis/stores'
import { Button, Form, Input,Select} from 'antd';
import Styles from "./../../assets/styles/shoptype.module.less"


const { Option } = Select;

export default function Stores() {
  useEffect(()=>{

    fetchData()

  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  
  const fetchData = async()=>{
    const res = await getShopAll()
    // console.log(res.data.rows);
    setData(res.data.rows)
  }
  const [data,setData]=useState()
  const [form] = Form.useForm();
  const columns = [
    {
      title: '商铺名称',
      dataIndex: 'shopName',
    },
    {
      title: '信誉分',
      dataIndex: 'prestige',
    },
    {
      title: '商铺状态',
      dataIndex: 'status',
      render:(a)=>{
         if(a==1){
          return <Button>启用</Button>
         }else{
          return <Button>停用</Button>
         }
      }
    },
    {
      title: '电话',
      dataIndex: 'telephone',
    },
    {
      title: '商铺类型',
      dataIndex: 'type',
      render:(a)=>{
        if(a==0){
         return <Button>充电站</Button>
        }else{
         return <Button>商铺</Button>
        }
     }
    },
    {
      title: '门店详情',
      render:()=>{
        return <div>查看详情</div>
      }
    },
    {
      title: '查看警告',
      render:()=>{
        return <div>警告详情</div>
      }
    },
    {
      title: '警告',
      render:()=>{
        return <Button>警告</Button>
      }
    },
    {
      title: '下架',
      render:()=>{
        return <Button>停用</Button>
      }
    },
   
  ]

  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <div>
      <div className={Styles.headerOne}>
        <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
          <Form.Item
            name="name"
            label="商铺名称"
          >
            <Input placeholder="" />
          </Form.Item>
          <Form.Item
            name="state"
            label="状态"
            style={{ width: "120px" }}
          >
            <Select
              placeholder=""
              allowClear
            >
              <Option value="0">启用</Option>
              <Option value="1">停用</Option>
            </Select>

          </Form.Item>
          <div className={Styles.findOne}>
            <Form.Item shouldUpdate>
              {() => (
                <Button type="primary" htmlType="submit" className={Styles.find}>
                  查询
                </Button>
              )}
            </Form.Item>
            <Button className={Styles.findTwo}>重置</Button>
          </div>

        </Form>
      </div>
      <Mytable columns={columns} data={data}></Mytable>
    </div>
  )
}
